import "./index.scss";
import { Swiper, Toast } from "antd-mobile";
const colors = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];
const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      className="content"
      style={{ background: color }}
      onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`);
      }}
    >
      {index + 1}
    </div>
  </Swiper.Item>
));

const Home = () => {
  const nav = [
    { title: "补贴推广" },
    { title: "补贴推广" },
    { title: "补贴推广" },
    { title: "补贴推广" },
  ];
  return (
    <div className="context">
      <Swiper autoplay loop>
        {items}
      </Swiper>
      <Nav nav={nav}></Nav>
    </div>
  );
};
const Nav = ({ nav }: any) => {
  return (
    <div className="nav">
      {nav.map((item: any, index: any) => (
        <div className="navItem" key={index}>
          <img src="" alt="" />
          <div>{item.title}</div>
        </div>
      ))}
    </div>
  );
};
export default Home;
